<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>code</title>
    <!-- <link rel="stylesheet" href="../lrx_igo/codemirror-5.65.2/lib/codemirror.css"> -->
    <link rel="stylesheet" href="${path}plugins/codemirror-5.65.2/lib/codemirror.css">

    <!-- <link rel="stylesheet" href="../lrx_igo/css/question_right_des.css"> -->
    <link rel="stylesheet" href="${path}css/lrx_igo/question_right_des.css">
    <script src="${path}plugins/codemirror-5.65.2/lib/codemirror.js"></script>
    <script src="${path}plugins/codemirror-5.65.2/mode/clike/clike.js"></script>
    <link rel="stylesheet" href="${path}plugins/codemirror-5.65.2/theme/darcula.css">
    <link rel="stylesheet" href="${path}plugins/codemirror-5.65.2/addon/fold/foldgutter.css">
    <link rel="stylesheet" href="${path}plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    
    <script src="${path}plugins/codemirror-5.65.2/addon/fold/foldcode.js"></script>
    <script src="${path}plugins/codemirror-5.65.2/addon/fold/foldgutter.js"></script>
    <script src="${path}plugins/codemirror-5.65.2/addon/fold/brace-fold.js"></script>
    <script src="${path}plugins/codemirror-5.65.2/addon/fold/comment-fold.js"></script>



    <style>

        .code_right{
            margin-top: 30px;
        }

        .CodeMirror{
         margin-top: 52px;
        }
        html, body {
            position : absolute;
            width : 100%;
            height : 100%;
        }


        *{margin: 0;padding: 0;}
     .nav{
        height: 50px;
         width: 100%;
         background: #f8f8f8;
         position: fixed;
         top: 0;
     }
     .content{
         height: 1400px;
         background: orange;
         margin-top: 100px; 
     }

     footer{
        width: 100%;
        position: absolute;
        bottom: 0
    }

    </style>
</head>
<body>


    
   




    <div class="nav">
        <div class="nav_right" style="position: relative;" style="align-items:center">
            <div class="first-section-container__2OTI">
                <button class="des_right_top_button" >
                    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" class="points">
                        <path fill-rule="evenodd" d="M12 11a1 1 0 011 1v4a1 1 0 11-2 0v-4a1 1 0 011-1zm0-3a1 1 0 110 2 1 1 0 010-2zm0 14C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd">
    
                        </path>
                    </svg>
                    <span>Java</span>
                    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" class="css-1rhb60f-Svg ea8ky5j0" style="margin-left: auto;">
                        <path fill-rule="evenodd" d="M16.293 9.293a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L12 13.586l4.293-4.293z" clip-rule="evenodd">
    
                        </path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    
        
    



    <div style="mrgin: top 50px;">
        <div class="code_right" style="margin-top:40px;">
            <textarea class="form-control" id="code" name="code">
public class Demo{
    public static void main(String[] args){
        System.out.println("Hello World");
    }
}
            </textarea>
        </div>
    </div>



    <div>


         
    </div>
    
    <!-- begin code -->
    
    <!-- end code-->
    

    <script>
        //根据DOM元素的id构造出一个编辑器
        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: {name: "html5", alignCDATA: true},
        mode: "groovy",    //实现groovy代码高亮
        mode: "text/x-java", //实现Java代码高亮
        lineNumbers: true,    //显示行号
        theme: "darcula",    //设置主题
        lineWrapping: true,    //代码折叠
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        matchBrackets: true,    //括号匹配
        // readOnly: true,        //只读
        });
        editor.setSize('100%', '640px');     //设置代码框的长宽
        editor.setValue(obj.scriptCode);    //给代码框赋值
    </script>
    


    <div class="code_commit">
        <div class="button_code">
            <div class="button_code_left">
                <button class="button_run">
                    
                    <span>执行代码</span>
                    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" class="downup_logo">
                        <path fill-rule="evenodd" d="M16.293 9.293a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L12 13.586l4.293-4.293z" clip-rule="evenodd">
    
                        </path>
                    </svg>
                </button>
            </div>
            

            <div class="button_code_right">
                <button class="submit_button">
                    <span>提交</span>
                </button>
            </div>
            
        </div>
       
    </div>
</body>
</html>